<template>

	<s-layout title="分类" :bgStyle="{ color: '#fff' }">
		<pc-turns :data="list" :delay="0" height="620" @achieve="achieve" @change="changeData" />
		<view class="fl-box">
			<template v-for="item in list">
				<view v-if="showFl(item)" :key="item.id" class="fl-box-item" @tap="toa(item)">
					<view class="in">
						<view>{{item.name}}</view>
						<view style="opacity: 0.7;font-size: 20rpx;">{{item.py}}</view>

						<img :src="item.icon" />
					</view>
				</view>
			</template>
		</view>
	</s-layout>
</template>


<script setup>
	import sheep from '@/sheep';
	import {
		ref
	} from 'vue'
	const list = [{
		src: '/static/01.png',
		id: '',
		name: '全部产品',
		py: 'QUAN BU CHAN PIN',
		show: true,
		icon: '/static/fl0.png'
	}, {
		src: '/static/02.png',
		id: '191',
		name: '组合夜景',
		py: 'ZUHEYEJING',
		show: true,
		icon: '/static/fl1.png'
	}, {
		src: '/static/03.png',
		id: '192',
		name: '特效产品',
		py: 'TEXIAOXILIE',
		show: true,
		icon: '/static/fl2.png'
	}, {
		src: '/static/04.png',
		id: '193',
		name: '模压雷',
		py: 'MOYALEI',
		show: true,
		icon: '/static/fl3.png'
	}, {
		src: '/static/05.png',
		id: '194',
		name: '模压日景',
		py: 'MOYARIJING',
		show: true,
		icon: '/static/fl4.png'
	}, {
		src: '/static/06.png',
		id: '195',
		name: '模压夜景',
		py: 'MOYAYEJING',
		show: true,
		icon: '/static/fl5.png'
	}, {
		src: '/static/07.png',
		id: '196',
		name: '玩具烟花',
		py: 'WANJUXILIE',
		show: true,
		icon: '/static/fl6.png'
	}]

	const checked = ref(null)

	const changeData = function(data) {
		checked.value = list.find(item => item.src === data.src)
		console.log(checked.value)
	}

	const achieve = function(data) {}

	function showFl(item) {
		if (!checked.value || !checked.value.id) return true
		if (!item.id) return true
		return item.id === checked.value.id
	}

	function toa(item) {
		if (item.id === '' && checked.value) {
			sheep.$router.go('/pages/goods/list?categoryId=' + checked.value.id)
		} else {

			sheep.$router.go('/pages/goods/list?categoryId=' + item.id)
		}
	}
	// const categoryList = ref([])
	// async function getList() {
	// 	const data = await sheep.$api.category.list();
	// 	console.log(data.data.children)
	// 	categoryList.value = data.data.children.map(item => {
	// 		const obj = list.find(el => el.id === item.id)
	// 		console.log(obj)
	// 		if (obj) return Object.assign(item, obj)
	// 		return item
	// 	});
	// 	console.log(categoryList)
	// }

	// getList()
</script>

<style lang="scss">
	.fl-box {
		width: 616rpx;
		margin: auto;
		margin-top: 40rpx;
	}

	.fl-box-item {
		width: 616rpx;
		height: 120rpx;
		background: url(/static/flBg.png) no-repeat;
		background-size: 100%;
		margin-top: 20rpx;
		position: relative;

		.in {
			color: #FFF6ED;
			font-size: 28rpx;
			padding-left: 100rpx;
			padding-top: 24rpx;
			line-height: 40rpx;
			// color: 
		}

		img {
			width: 72rpx;
			height: 72rpx;
			position: absolute;
			right: 20rpx;
			top: 24rpx;
		}
	}
</style>